<template>
	<om-page :title="pageTitle">
		<!-- <view id="container" :style="{width: windowWidth+'px',height:windowHeight+'px'}"></view> -->
		<view class="savebtn">
			<view class="box">
				<a @click="saveMarker">确定</a>
			</view>
		</view>
		<view id="container" class="map"></view>
		<view class="om_hd_fix" style="top: 300px;">
			<uni-search-bar 
			bgColorCls="bg-steelblue" 
			cancelColor="text-white"
			 :focus="true" 
			 placeholder="输入搜索地址" 
			 @confirm="confirm" 
			 @input="confirm"></uni-search-bar>
		</view>
		<view class="page__bd" style="padding-top: 100rpx; margin-top: 300px;">
			<view class="search-list">
				<view v-for="item in searchList" @click="addMarker(item)" class="search-item">
					<view class="name">{{ item.name }}</view>
					<view class="address">{{ item.address }}</view>
				</view>
			</view>
			<view v-show="searchList.length == 0" class="no-data">你搜索的的地点不存在或者超出了微调允许的范围</view>
		</view>
	</om-page>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle:"地点微调",
				// windowWidth: '',
				// windowHeight: '',
				searchStr: '',
				placeLng: '',
				placeLat: '',
				placeName: '',
				searchList: [],
				markerLng: '',
				markerLat: '',
				markerName: '',
				pageCount: 1,
				pageNum: 1,
				pageSize: 50,
			};
		},
		methods: {
			confirm(e){
				let _that = this
				if (e.value) {
				  if (!_that.searchStr || (_that.searchStr && _that.searchStr != e.value.trim())) {
					_that.searchStr = e.value.trim()
					var cpoint = [_that.placeLng, _that.placeLat]; //中心点坐标
					var map = new AMap.Map('container',{
						zoom: 16, //设置地图的缩放级别
						center: cpoint
					});
					
					var marker = new AMap.Marker({
					    position: new AMap.LngLat(_that.placeLng, _that.placeLat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
					    title: _that.placeName
					});
					map.add(marker);
					
					_that.pageNum = 1
					_that.pageCount = 1
					
					AMap.service(["AMap.PlaceSearch"], function() {
					        //构造地点查询类
					        var placeSearch = new AMap.PlaceSearch({ 
					            pageSize: _that.pageSize, // 单页显示结果条数
					            pageIndex: _that.pageNum, // 页码
					            citylimit: false,  //是否强制限制在设置的城市内搜索
					        });
					        
					        
					        placeSearch.searchNearBy(_that.searchStr, cpoint, 50000, function(status, result) {
								console.log(status)
								console.log(result)
								if(status == 'complete'){
									_that.searchList = result.poiList.pois
									_that.pageCount = result.poiList.count
								}
								if(status == 'no_data'){
									_that.searchList = []
								}
								if(status == 'error'){
									//错误信息
								}
					        });
					    });
				  }
				} else {
				  // _that.searchClear()
				}
			},
			addMarker(item){
				let _that = this
				var cpoint = [_that.placeLng, _that.placeLat]; //中心点坐标
				var map = new AMap.Map('container',{
					zoom: 16, //设置地图的缩放级别
					center: cpoint
				});
				
				if(_that.markerLng && _that.markerLat){
					var marker = new AMap.Marker({
					    position: new AMap.LngLat(_that.markerLng, _that.markerLat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
					    title: _that.markerName
					});
					map.remove(marker);
				}
				
				_that.markerLng = item.location.lng
				_that.markerLat = item.location.lat
				_that.markerName = item.name
				
				var marker = new AMap.Marker({
				    position: new AMap.LngLat(_that.markerLng, _that.markerLat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
				    title: _that.markerName
				});
				map.add(marker);
				map.panTo([_that.markerLng, _that.markerLat]);
				_that.placeLng = _that.markerLng
				_that.placeLat = _that.markerLat
				_that.placeName = _that.markerName
			},
			saveMarker(){
				let _that = this
				let markerDesc = {
					lng: _that.placeLng,
					lat: _that.placeLat,
					name: _that.placeName
				}
				uni.setStorageSync('visitSignMarkerKey', JSON.stringify(markerDesc))
				uni.navigateBack()
			},
		},
		onLoad(option) {
			let _that = this
			_that.placeLng = option.placeLng
			_that.placeLat = option.placeLat
			_that.placeName = option.placeName
			// uni.getSystemInfo({
			//     success: function (res) {
			//        _that.windowWidth = res.windowWidth 
			// 	   _that.windowHeight = res.windowHeight 
			//     }
			// })
			var cpoint = [_that.placeLng, _that.placeLat]; //中心点坐标
			window.onLoad  = function(){
			    var map = new AMap.Map('container',{
					zoom: 16, //设置地图的缩放级别
					center: cpoint
				});
				
				// // 同时引入工具条插件，比例尺插件和鹰眼插件
				// AMap.plugin([
				//     'AMap.ToolBar',
				//     // 'AMap.Scale',
				//     // 'AMap.HawkEye',
				//     // 'AMap.MapType',
				//     // 'AMap.Geolocation',
				// ], function(){
				//     // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
				//     map.addControl(new AMap.ToolBar());
				
				// //     // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
				// //     map.addControl(new AMap.Scale());
				
				// //     // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
				// //     map.addControl(new AMap.HawkEye({isOpen:true}));
				   
				// //     // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
				// //     map.addControl(new AMap.MapType());
				   
				// //     // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
				// //     map.addControl(new AMap.Geolocation());
				// });
				
				// AMap.plugin('AMap.Geolocation', function() {
				//   var geolocation = new AMap.Geolocation({
				//     // 是否使用高精度定位，默认：true
				//     enableHighAccuracy: true,
				//     // 设置定位超时时间，默认：无穷大
				//     timeout: 10000,
				//     // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
				//     buttonOffset: new AMap.Pixel(10, 20),
				//     //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
				//     zoomToAccuracy: true,     
				//     //  定位按钮的排放位置,  RB表示右下
				//     buttonPosition: 'RB'
				//   })
				
				//   geolocation.getCurrentPosition()
				//   AMap.event.addListener(geolocation, 'complete', onComplete)
				//   AMap.event.addListener(geolocation, 'error', onError)
				
				//   function onComplete (data) {
				// 	  console.log(data)
				//     // data是具体的定位信息
				// 	_that.lng = data.position.lng
				// 	_that.lat = data.position.lat
				//   }
				
				//   function onError (data) {
				//     // 定位出错
				//   }
				// })
				
				var marker = new AMap.Marker({
				    position: new AMap.LngLat(_that.placeLng, _that.placeLat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
				    title: _that.placeName
				});
				map.add(marker);
				
				AMap.service(["AMap.PlaceSearch"], function() {
				    //构造地点查询类
				    var placeSearch = new AMap.PlaceSearch({ 
				        pageSize: _that.pageSize, // 单页显示结果条数
				        pageIndex: _that.pageNum, // 页码
				        citylimit: false,  //是否强制限制在设置的城市内搜索
				    });
				        
				        
				    placeSearch.searchNearBy(_that.searchStr, cpoint, 50000, function(status, result) {
						console.log(status)
						console.log(result)
						if(status == 'complete'){
							_that.searchList = result.poiList.pois
							_that.pageCount = result.poiList.count
						}
						if(status == 'no_data'){
							_that.searchList = []
						}
						if(status == 'error'){
							//错误信息
						}
				    });
				});
			}
			// https://webapi.amap.com/maps?v=2.0&key=
			var url = 'https://webapi.amap.com/maps?v=1.4.15&key=92bfa8b848fb3fbaf2b4d5fa40447225&callback=onLoad';
			var jsapi = document.createElement('script');
			jsapi.charset = 'utf-8';
			jsapi.src = url;
			document.head.appendChild(jsapi);
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			let _that = this;
			if(_that.pageCount > (_that.pageNum * _that.pageSize)){
				_that.pageNum++
				
				var cpoint = [_that.placeLng, _that.placeLat]; //中心点坐标
				var map = new AMap.Map('container',{
					zoom: 16, //设置地图的缩放级别
					center: cpoint
				});
				
				var marker = new AMap.Marker({
				    position: new AMap.LngLat(_that.placeLng, _that.placeLat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
				    title: _that.placeName
				});
				map.add(marker);
				
				AMap.service(["AMap.PlaceSearch"], function() {
				    //构造地点查询类
				    var placeSearch = new AMap.PlaceSearch({ 
				        pageSize: _that.pageSize, // 单页显示结果条数
				        pageIndex: _that.pageNum, // 页码
				        citylimit: false,  //是否强制限制在设置的城市内搜索
				    });
				        
				        
				    placeSearch.searchNearBy(_that.searchStr, cpoint, 50000, function(status, result) {
						console.log(status)
						console.log(result)
						if(status == 'complete'){
							_that.searchList = _that.searchList.concat(result.poiList.pois)
							_that.pageCount = result.poiList.count
						}
						if(status == 'no_data'){
							
						}
						if(status == 'error'){
							//错误信息
						}
				    });
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.savebtn{
		position: fixed;
		padding: 0 15px;
		font-size: 14px;
		z-index: 99;
		width: 100%;
		background: #FFF;
		height: 50px;
		.box{
			float: right;
			width: 76px;
			a{
				display: block;
				width: 76px;
				height: 32px;
				line-height: 32px;
				text-align: center;
				display: block;
				color: #0081ff;
				background-color: #cce6ff;
				margin: 9px 0;
			}
		}
	}
	.map{
		width: 100%;
		height:250px;
		position: fixed;
		top: 50px;
	}
	.search-list{
		.search-item{
			padding: 10px 15px;
			border-bottom: 1px solid #c8c7cc;
			.name{
				color: #3b4144;
				height: 18px;
				line-height: 18px;
				width: 100%;
				font-size: 16px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.address{
				color: #999999;
				height: 16px;
				line-height: 16px;
				width: 100%;
				font-size: 12px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
	.no-data{
		line-height: 44px;
		padding: 0 15px;
	}
</style>
